<template>
  <a-modal
    :open="visible"
    title="排班管理"
    width="1000px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="schedule-management">
      <!-- 筛选区域 -->
      <div class="filter-section">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="部门">
              <a-select
                v-model:value="filters.department"
                placeholder="请选择部门"
                allow-clear
              >
                <a-select-option value="按摩部">按摩部</a-select-option>
                <a-select-option value="美容部">美容部</a-select-option>
                <a-select-option value="SPA部">SPA部</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="技师状态">
              <a-select
                v-model:value="filters.status"
                placeholder="请选择状态"
                allow-clear
              >
                <a-select-option value="active">在职</a-select-option>
                <a-select-option value="training">培训中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="排班日期">
              <a-date-picker
                v-model:value="filters.date"
                placeholder="请选择日期"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="操作">
              <a-space>
                <a-button type="primary" @click="batchSchedule">
                  批量排班
                </a-button>
                <a-button @click="clearSchedule">清空排班</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <!-- 排班表格 -->
      <div class="schedule-table">
        <a-table
          :columns="columns"
          :data-source="filteredTechnicians"
          :pagination="false"
          size="small"
          row-key="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
              <div class="technician-info">
                <a-avatar :src="record.avatar" :alt="record.name" size="small">
                  {{ record.name.charAt(0) }}
                </a-avatar>
                <span>{{ record.name }}</span>
              </div>
            </template>
            <template v-else-if="column.key === 'department'">
              <a-tag :color="getDepartmentColor(record.department)">
                {{ record.department }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'monday'">
              <a-select
                v-model:value="record.schedule.monday"
                placeholder="选择班次"
                size="small"
                style="width: 100px"
              >
                <a-select-option value="早班">早班</a-select-option>
                <a-select-option value="中班">中班</a-select-option>
                <a-select-option value="晚班">晚班</a-select-option>
                <a-select-option value="休息">休息</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'tuesday'">
              <a-select
                v-model:value="record.schedule.tuesday"
                placeholder="选择班次"
                size="small"
                style="width: 100px"
              >
                <a-select-option value="早班">早班</a-select-option>
                <a-select-option value="中班">中班</a-select-option>
                <a-select-option value="晚班">晚班</a-select-option>
                <a-select-option value="休息">休息</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'wednesday'">
              <a-select
                v-model:value="record.schedule.wednesday"
                placeholder="选择班次"
                size="small"
                style="width: 100px"
              >
                <a-select-option value="早班">早班</a-select-option>
                <a-select-option value="中班">中班</a-select-option>
                <a-select-option value="晚班">晚班</a-select-option>
                <a-select-option value="休息">休息</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'thursday'">
              <a-select
                v-model:value="record.schedule.thursday"
                placeholder="选择班次"
                size="small"
                style="width: 100px"
              >
                <a-select-option value="早班">早班</a-select-option>
                <a-select-option value="中班">中班</a-select-option>
                <a-select-option value="晚班">晚班</a-select-option>
                <a-select-option value="休息">休息</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'friday'">
              <a-select
                v-model:value="record.schedule.friday"
                placeholder="选择班次"
                size="small"
                style="width: 100px"
              >
                <a-select-option value="早班">早班</a-select-option>
                <a-select-option value="中班">中班</a-select-option>
                <a-select-option value="晚班">晚班</a-select-option>
                <a-select-option value="休息">休息</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'saturday'">
              <a-select
                v-model:value="record.schedule.saturday"
                placeholder="选择班次"
                size="small"
                style="width: 100px"
              >
                <a-select-option value="早班">早班</a-select-option>
                <a-select-option value="中班">中班</a-select-option>
                <a-select-option value="晚班">晚班</a-select-option>
                <a-select-option value="休息">休息</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'sunday'">
              <a-select
                v-model:value="record.schedule.sunday"
                placeholder="选择班次"
                size="small"
                style="width: 100px"
              >
                <a-select-option value="早班">早班</a-select-option>
                <a-select-option value="中班">中班</a-select-option>
                <a-select-option value="晚班">晚班</a-select-option>
                <a-select-option value="休息">休息</a-select-option>
              </a-select>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button
                  type="link"
                  size="small"
                  @click="copySchedule(record)"
                >
                  复制排班
                </a-button>
                <a-button
                  type="link"
                  size="small"
                  @click="clearTechnicianSchedule(record)"
                >
                  清空
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>

      <!-- 班次说明 -->
      <div class="shift-info">
        <h4>班次说明</h4>
        <a-row :gutter="16">
          <a-col :span="6">
            <div class="shift-item">
              <div class="shift-color" style="background: #52c41a"></div>
              <span>早班: 09:00-17:00</span>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="shift-item">
              <div class="shift-color" style="background: #1890ff"></div>
              <span>中班: 13:00-21:00</span>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="shift-item">
              <div class="shift-color" style="background: #722ed1"></div>
              <span>晚班: 17:00-01:00</span>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="shift-item">
              <div class="shift-color" style="background: #f5f5f5"></div>
              <span>休息</span>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { message } from 'ant-design-vue';

interface Technician {
  id: string;
  name: string;
  avatar?: string;
  gender: 'male' | 'female';
  phone: string;
  email?: string;
  department: string;
  position: string;
  level: '初级' | '中级' | '高级' | '专家';
  status: 'active' | 'inactive' | 'training';
  hireDate: string;
  skills: string[];
  performance: {
    score: number;
    services: number;
    income: number;
  };
  schedule: {
    workDays: string[];
    workTime: string;
    monday?: string;
    tuesday?: string;
    wednesday?: string;
    thursday?: string;
    friday?: string;
    saturday?: string;
    sunday?: string;
  };
  notes?: string;
}

interface Props {
  visible: boolean;
  technicians: Technician[];
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 筛选条件
const filters = ref({
  department: '',
  status: '',
  date: null,
});

// 表格列定义
const columns = [
  {
    title: '技师姓名',
    dataIndex: 'name',
    key: 'name',
    width: 120,
    fixed: 'left',
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department',
    width: 100,
    fixed: 'left',
  },
  {
    title: '周一',
    dataIndex: 'monday',
    key: 'monday',
    width: 120,
  },
  {
    title: '周二',
    dataIndex: 'tuesday',
    key: 'tuesday',
    width: 120,
  },
  {
    title: '周三',
    dataIndex: 'wednesday',
    key: 'wednesday',
    width: 120,
  },
  {
    title: '周四',
    dataIndex: 'thursday',
    key: 'thursday',
    width: 120,
  },
  {
    title: '周五',
    dataIndex: 'friday',
    key: 'friday',
    width: 120,
  },
  {
    title: '周六',
    dataIndex: 'saturday',
    key: 'saturday',
    width: 120,
  },
  {
    title: '周日',
    dataIndex: 'sunday',
    key: 'sunday',
    width: 120,
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    fixed: 'right',
  },
];

// 计算属性
const filteredTechnicians = computed(() => {
  let filtered = props.technicians;

  // 部门筛选
  if (filters.value.department) {
    filtered = filtered.filter(
      (tech) => tech.department === filters.value.department,
    );
  }

  // 状态筛选
  if (filters.value.status) {
    filtered = filtered.filter((tech) => tech.status === filters.value.status);
  }

  return filtered;
});

// 方法
const getDepartmentColor = (department: string) => {
  const colorMap: Record<string, string> = {
    按摩部: 'blue',
    美容部: 'pink',
    SPA部: 'purple',
  };
  return colorMap[department] || 'default';
};

const batchSchedule = () => {
  message.info('批量排班功能开发中');
};

const clearSchedule = () => {
  message.info('清空排班功能开发中');
};

const copySchedule = (technician: Technician) => {
  message.info(`复制技师 ${technician.name} 的排班`);
};

const clearTechnicianSchedule = (technician: Technician) => {
  // 清空该技师的所有排班
  technician.schedule.monday = undefined;
  technician.schedule.tuesday = undefined;
  technician.schedule.wednesday = undefined;
  technician.schedule.thursday = undefined;
  technician.schedule.friday = undefined;
  technician.schedule.saturday = undefined;
  technician.schedule.sunday = undefined;
  message.success(`已清空技师 ${technician.name} 的排班`);
};

const handleOk = () => {
  message.success('排班保存成功');
  emit('update:visible', false);
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.schedule-management {
  max-height: 600px;
  overflow-y: auto;
}

.filter-section {
  padding: 16px;
  margin-bottom: 16px;
  background: #fafafa;
  border-radius: 4px;
}

.schedule-table {
  margin-bottom: 16px;
}

.technician-info {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shift-info {
  padding: 16px;
  background: #fafafa;
  border-radius: 4px;
}

.shift-info h4 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}

.shift-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shift-color {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 600;
  text-align: center;
  background: #fafafa;
}

:deep(.ant-table-tbody > tr > td) {
  text-align: center;
}
</style>
